<template>
  <div>
    <div class="tabs u-center">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        class="tab"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CTab',
  components: {},
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    tabs: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {}
  },
  data() {
    return {
    };
  },
  computed: {
    activeTab: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('input', v);
      }
    }
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.tab {
  height: 34px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 16px;
  background: #f2f6fc;
  box-sizing: border-box;
  border: #0d48ce;
  cursor: pointer;
  &:first-child {
    border-radius: 4px 0px 0px 4px;
  }
  &:last-child {
    border-radius: 0px 4px 4px 0px;
  }
  &.active {
    border: 1px solid #0d48ce;
    background: #ffffff;
    color: #0d48ce;
  }
}
</style>
